var banner=document.querySelector('.banner'),
    wrap=document.querySelector('wrap'),
    circles=document.querySelectorAll('.circle span'),
    imgWidth=banner.offsetWidth;

wrap.innerHTML += wrap.innerHTML;
var len = wrap.children.length;
wrap.style.width = len * 100 + 'vw';
wrap.style.transform='translateX(0px)';

var starPoint=0,
    startleft=0,
    movePointx=0,
    cn=0,
    ln=0,
    timer=null;
    
banner .addEventListener('touchstart',function(ev){
    if(cn==0){
        cn=len/2;
    }
    starPointX=ev.changedTouches[0].pageX;
    startleft=wrap.style.transform.split('(')[1];
});
banner .addEventListener('touchmove',function(ev){
    movePointX=ev.changedTouches[0].pageX - starPointX;
    wrap.style.transform = 'translateX(' + (movePointX + startleft) + 'px)';
});
banner .addEventListener('touchend',function(ev){
    movePointX = ev.changedTouches[0].pageX - starPointX;
    var backWidth=imgWidth / 8;
    if(Math.abs(movePointX) > backWidth){
        cn -= movePointX / Math.abs(movePointX);
    }
    wrap.style.transition = '3s';
    wrap.style.transform = 'translateX(' + -cn * imgWidth + 'px)';
    var hn = cn % (len/2);
    circles[ln].className = '';
    circles[hn].className = 'active';
    ln=hn;

});